<template>
  <div class="content">
    <p>基础用法</p>
    <div class="group anvil">
      <anvil-link href="https://element.eleme.io" target="_blank">
        默认链接
      </anvil-link>
      <anvil-link type="primary" @click="handleClick">主要链接</anvil-link>
      <anvil-link type="success">成功链接</anvil-link>
      <anvil-link type="warning">警告链接</anvil-link>
      <anvil-link type="danger">危险链接</anvil-link>
      <anvil-link type="info">信息链接</anvil-link>
    </div>

    <div class="group el">
      <el-link href="https://element.eleme.io" target="_blank"
      >默认链接</el-link
      >
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </div>

    <p>禁用状态</p>
    <div class="group anvil">
      <anvil-link disabled>默认链接</anvil-link>
      <anvil-link type="primary" disabled>主要链接</anvil-link>
      <anvil-link type="success" disabled>成功链接</anvil-link>
      <anvil-link type="warning" disabled>警告链接</anvil-link>
      <anvil-link type="danger" disabled>危险链接</anvil-link>
      <anvil-link type="info" disabled>信息链接</anvil-link>
    </div>
    <div class="group el">
      <el-link disabled>默认链接</el-link>
      <el-link type="primary" disabled>主要链接</el-link>
      <el-link type="success" disabled>成功链接</el-link>
      <el-link type="warning" disabled>警告链接</el-link>
      <el-link type="danger" disabled>危险链接</el-link>
      <el-link type="info" disabled>信息链接</el-link>
    </div>

    <p>下划线</p>
    <div class="group anvil">
      <anvil-link :underline="false">无下划线</anvil-link>
      <anvil-link>有下划线</anvil-link>
    </div>
    <div class="group el">
      <el-link :underline="false">无下划线</el-link>
      <el-link>有下划线</el-link>
    </div>

    <p>图标</p>
    <div class="group anvil">
      <div>
        <anvil-link icon="el-icon-edit">编辑</anvil-link>
        <anvil-link>
          查看<i class="el-icon-view el-icon--right"></i>
        </anvil-link>
      </div>
    </div>
    <div class="group el">
      <div>
        <el-link icon="el-icon-edit">编辑</el-link>
        <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(e) {
      console.log("点击了", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  /* border: 1px solid red; */
  padding: 6px;

  &.anvil {
    border-color: skyblue;
  }

  &.el {
    border-color: gray;
    display: block;
  }
}
</style>
